<!DOCTYPE html>

<html>
<head>
  <title>view.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page_wrapper">
            <div id="jump_page">
              
                
                <a class="source" href="app.html">
                  app.js
                </a>
              
                
                <a class="source" href="controller.html">
                  controller.js
                </a>
              
                
                <a class="source" href="helpers.html">
                  helpers.js
                </a>
              
                
                <a class="source" href="model.html">
                  model.js
                </a>
              
                
                <a class="source" href="view.html">
                  view.js
                </a>
              
            </div>
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>view.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-comment">/* global $, window */</span></pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>This module defines the Rendering UI or <code>View</code> for the
App</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">MODULE</span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>The View Class</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> </span>{
    <span class="hljs-keyword">constructor</span> (controller, targetElement) {</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>set the local state</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>.DEFAULT_DNS_NAME = <span class="hljs-string">'Anonymous'</span>
      <span class="hljs-keyword">this</span>.controller = controller
      <span class="hljs-keyword">this</span>.data = controller.getData()</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>start up rendering</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>.init(targetElement || <span class="hljs-string">'#comments'</span>)</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>link to data driven updates</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>.controller.on(<span class="hljs-string">'comments-updated'</span>, <span class="hljs-keyword">this</span>._refresh.bind(<span class="hljs-keyword">this</span>))
      <span class="hljs-keyword">this</span>.controller.on(<span class="hljs-string">'user-updated'</span>, <span class="hljs-keyword">this</span>._refreshDNSList.bind(<span class="hljs-keyword">this</span>))
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>setup the target element</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    init (elemId) {</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>try to find the element. Keep it around as <code>this._$</code></p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>._$ = $(elemId)
      <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>._$.length) {
        <span class="hljs-keyword">throw</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Element not found: '</span> + elemId)
      }</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>render initial state</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>._initialRender()</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>and link up the events</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>._setupInitialEvents()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>helper function to find a specific element
in the tree that we are managing</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    $ (target) {
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._$.find(target)
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>Global UI</p>

            </div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Action to enable comments</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    enableComments () {
      <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.controller.isAdmin()) {
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">console</span>.error(<span class="hljs-string">'Admin has the privilege to enable comment'</span>)
      }
      <span class="hljs-keyword">this</span>._spinUntil(<span class="hljs-keyword">this</span>.controller.enableComments())
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>Show Popup with Blocked Users</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    showBlockedUsers () {
      <span class="hljs-keyword">const</span> prepareTemplate = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> template = <span class="hljs-string">'&lt;ul class="list-group"&gt;'</span>
        <span class="hljs-built_in">Object</span>.keys(<span class="hljs-keyword">this</span>.data.blockedUsers).forEach(<span class="hljs-function"><span class="hljs-params">user</span> =&gt;</span> {
          template += <span class="hljs-string">`&lt;li class="list-group-item"&gt;
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
              &lt;input type="radio" name="blockedUsers" value="<span class="hljs-subst">${user}</span>"&gt; <span class="hljs-subst">${user}</span>
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/li&gt;`</span>
        })
        template += <span class="hljs-string">'&lt;/ul&gt;'</span>
        <span class="hljs-keyword">return</span> template
      }
      <span class="hljs-keyword">this</span>._showPopup(<span class="hljs-string">'Blocked Users'</span>, prepareTemplate(), [
        { <span class="hljs-attr">name</span>: <span class="hljs-string">'Cancel'</span>, <span class="hljs-attr">call</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>._hidePopup() },
        { <span class="hljs-attr">name</span>: <span class="hljs-string">'Unblock User'</span>, <span class="hljs-attr">call</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>._selectUnBlockUser() }
      ])
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>Aomment interactions</p>

            </div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Fired when the comment form is submitted via click</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    addComment () {
      <span class="hljs-keyword">var</span> commentEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentText'</span>);
      <span class="hljs-keyword">var</span> comment = commentEle.val()
      <span class="hljs-keyword">var</span> name = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_dnsList'</span>).val()
      <span class="hljs-keyword">if</span> (!!name &amp;&amp; !!comment) {
        <span class="hljs-keyword">this</span>._spinUntil(<span class="hljs-keyword">this</span>.controller.postComment(comment, name))
        commentEle.val(<span class="hljs-string">''</span>);
      }
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>Delete the comment at a specific index</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    deleteComment (comment, index) {
      <span class="hljs-keyword">this</span>._spinUntil(<span class="hljs-keyword">this</span>.controller.deleteComment(index))
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p>block the userName at index</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    blockUser (userName, index) {
      <span class="hljs-keyword">if</span> (userName === <span class="hljs-keyword">this</span>.DEFAULT_DNS_NAME) {
        <span class="hljs-keyword">this</span>._toggleSpinner()
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._getUserNameForAnonymous(index)
      }
      <span class="hljs-keyword">this</span>._spinUntil(<span class="hljs-keyword">this</span>.controller.blockUser(userName, index))
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>Internals</p>

            </div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>render the inital template</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _initialRender () {
      <span class="hljs-keyword">this</span>._$.html(<span class="hljs-string">`
      &lt;div class="comment-block center-block"&gt;
        &lt;div class="comment-spinner" id="_commentSpinner"&gt;
          &lt;div class="comment-spinner-b"&gt;
            &lt;i class="spinner" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="comment-opt" id="_commentOpt"&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Unblock User&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="_comments"&gt;
          &lt;div id="_commentEnable" class="comment-enable"&gt;
            &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-body"&gt;
                &lt;button class="btn btn-primary" type="enableComments" &gt;Enable Comments&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="well comment-input" id="_commentInput"&gt;
            &lt;h4&gt;Leave a Comment:&lt;/h4&gt;
            &lt;form role="form" id="_commentForm"&gt;
              &lt;div class="form-group"&gt;
                &lt;select class="form-control" id="_dnsList"&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;textarea id="_commentText" class="form-control" rows="4"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="comments" id="_commentList"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="popup" class="popup"&gt;
        &lt;div class="popup-container" id="_popupContainer"&gt;
          &lt;h3 class="head"&gt;&lt;/h3&gt;
          &lt;div class="content"&gt;
          &lt;/div&gt;
          &lt;div class="foot"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;`</span>)
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p>link the buttons from th starting template to the given
actions</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _setupInitialEvents () {
      <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentOpt button'</span>).click(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>.showBlockedUsers())
      <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentEnable button'</span>).click(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>.enableComments())
      <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentForm button'</span>).click(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>.addComment())
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p>Data driven UI updates
triggered by events emitted from the controller</p>

            </div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>the comments-updated was called, we need refresh</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _refresh () {</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p>stop spinning (we were)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">this</span>._toggleSpinner(<span class="hljs-literal">false</span>)</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p>indicating we aren’t enbled yet</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.controller.commentsEnabled()) {</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p>so show the ‘enable’ button and disable the comments block</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>._toggleEnableCommentBtn(<span class="hljs-literal">true</span>)
        <span class="hljs-keyword">this</span>._toggleCommentsInput(<span class="hljs-literal">false</span>)
      } <span class="hljs-keyword">else</span> {</pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>all cool, disable the enable button</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>._toggleEnableCommentBtn(<span class="hljs-literal">false</span>)

        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.controller.hasBlockedUsers()) {
          <span class="hljs-keyword">this</span>._toggleCommentOpts(<span class="hljs-literal">true</span>);
        }</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p>render the comments and the comment box</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>._renderComments()
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.controller.hasAuthToken()) {
         <span class="hljs-keyword">this</span>._toggleCommentsInput(<span class="hljs-literal">true</span>)
        }
      }
    }

    _renderComments () {
      MODULE.log(<span class="hljs-string">'refreshing comments list'</span>)

      <span class="hljs-keyword">const</span> isBlockedUser = <span class="hljs-function">(<span class="hljs-params">name</span>) =&gt;</span> {
        <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.data.blockedUsers) {
          <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>
        }
        <span class="hljs-keyword">return</span> !!<span class="hljs-keyword">this</span>.data.blockedUsers.hasOwnProperty(name)
      }</pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p>template renderer per comment</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">const</span> renderComment = <span class="hljs-function">(<span class="hljs-params">comment, index</span>) =&gt;</span> {
        <span class="hljs-keyword">let</span> item = $(<span class="hljs-string">`
        &lt;div class="media"&gt;
          &lt;div class="media-body"&gt;
            &lt;h4 class="media-heading"&gt;<span class="hljs-subst">${comment.name}</span>
              &lt;small&gt;<span class="hljs-subst">${(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(comment.time)).toLocaleString()}</span>&lt;/small&gt;
            &lt;/h4&gt;
            <span class="hljs-subst">${comment.comment}</span>
          &lt;/div&gt;
        &lt;/div&gt;`</span>)</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <p>admins have extra actions they can do on the item</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.controller.isAdmin()) {
          <span class="hljs-keyword">let</span> $adminMenu = $(<span class="hljs-string">'&lt;div class="media-options"&gt;&lt;/div&gt;'</span>)
          MODULE.log($adminMenu)

          $adminMenu.append($(
            <span class="hljs-string">`&lt;button class="btn btn-danger btn-xs" type="button"&gt;Delete&lt;/button&gt;`</span>
            ).click(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>.deleteComment(comment, index)))

          <span class="hljs-keyword">if</span> (!isBlockedUser(comment.name)) {
            $adminMenu.append($(
              <span class="hljs-string">`&lt;button class="btn btn-warning btn-xs" type="button" &gt;Block&lt;/button&gt;`</span>
            ).click(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>.blockUser(comment.name, index)))
          }
          item.append($adminMenu);
        }
        <span class="hljs-keyword">return</span> item
      }</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              <p>clear out current commentsList</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">let</span> target = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentList'</span>)
      target.empty()

      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.data.commentList.length) {</pre></div></div>
            
        </li>
        
        
        <li id="section-32">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-32">&#182;</a>
              </div>
              <p>for every comment found, render the comment at the index</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.data.commentList.forEach(<span class="hljs-function">(<span class="hljs-params">comment</span>) =&gt;</span> {
          target.append(renderComment(comment.comment, comment.index))
        })
        target.show()
      } <span class="hljs-keyword">else</span> {</pre></div></div>
            
        </li>
        
        
        <li id="section-33">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-33">&#182;</a>
              </div>
              <p>no comments found? Hide the element</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        target.hide()
      }
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-34">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-34">&#182;</a>
              </div>
              <p>we received <code>user-updated</code>, refresh the DNS listing</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _refreshDNSList () {
      <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.data.user.dns) {
        <span class="hljs-keyword">return</span>
      }
      <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_dnsList'</span>).html(
        <span class="hljs-keyword">this</span>.data.user.dns.map(
          <span class="hljs-function">(<span class="hljs-params">list, i</span>) =&gt;</span> <span class="hljs-string">`&lt;option value="<span class="hljs-subst">${list}</span>" <span class="hljs-subst">${(i === <span class="hljs-number">0</span> ? <span class="hljs-string">' selected'</span> : <span class="hljs-string">''</span>)}</span>&gt;<span class="hljs-subst">${list}</span>&lt;/option&gt;`</span>
        ).join(<span class="hljs-string">'\n'</span>))
      .append(<span class="hljs-string">`&lt;option value="<span class="hljs-subst">${<span class="hljs-keyword">this</span>.DEFAULT_DNS_NAME}</span>"&gt;<span class="hljs-subst">${<span class="hljs-keyword">this</span>.DEFAULT_DNS_NAME}</span>&lt;/option&gt;`</span>);
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-35">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-35">&#182;</a>
              </div>
              <p>User blocking/unblocking flows</p>

            </div>
            
        </li>
        
        
        <li id="section-36">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-36">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>    _selectUnBlockUser () {
      <span class="hljs-keyword">const</span> selected = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'input[name=blockedUsers]:checked'</span>).val()
      <span class="hljs-keyword">this</span>._hidePopup();
      <span class="hljs-keyword">if</span> (!selected) {
        <span class="hljs-keyword">return</span>
      }

      <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._spinUntil(<span class="hljs-keyword">this</span>.controller.unblockUser(selected))
    }

    _setUserNameForAnonymous (index) {
      <span class="hljs-keyword">const</span> userName = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_blockUserName'</span>).val()
      <span class="hljs-keyword">this</span>._hidePopup()
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.data.blockedUsers &amp;&amp; <span class="hljs-keyword">this</span>.data.blockedUsers.hasOwnProperty(userName)) {
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'User Name already exist'</span>)
      }
      <span class="hljs-keyword">this</span>._spinUntil(<span class="hljs-keyword">this</span>.controller.blockUser(userName, index))
    }

    _getUserNameForAnonymous (index) {
      <span class="hljs-keyword">const</span> template = <span class="hljs-string">`
      &lt;div class="form-group row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;div class="col-lg-12"&gt;
            &lt;input type="text" class="form-control" id="_blockUserName" placeholder="Enter Reference Name"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;`</span>
      <span class="hljs-keyword">this</span>._showPopup(<span class="hljs-string">'Anonymous User Reference Name'</span>, template, [
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'Cancel'</span>, <span class="hljs-attr">call</span>: <span class="hljs-keyword">this</span>._hidePopup() },
          { <span class="hljs-attr">name</span>: <span class="hljs-string">'Block'</span>, <span class="hljs-attr">call</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">this</span>._setUserNameForAnonymous(index) }
      ])
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-37">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-37">&#182;</a>
              </div>
              <p>General UI Features</p>

            </div>
            
        </li>
        
        
        <li id="section-38">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-38">&#182;</a>
              </div>
              <p>Show/hide Loading animation</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _toggleSpinner (state) {
      <span class="hljs-keyword">let</span> spinnerEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentSpinner'</span>)
      <span class="hljs-keyword">return</span> state ? spinnerEle.show() : spinnerEle.hide()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-39">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-39">&#182;</a>
              </div>
              <p>Show/hide commentsEnable button</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _toggleEnableCommentBtn (status) {
      <span class="hljs-keyword">let</span> commentEnableEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentEnable'</span>)
      MODULE.log(commentEnableEle)
      <span class="hljs-keyword">return</span> status ? commentEnableEle.show() : commentEnableEle.hide()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-40">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-40">&#182;</a>
              </div>
              <p>Show/hide commentsOptions button</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _toggleCommentOpts (status) {
      <span class="hljs-keyword">let</span> commentOptsEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentOpt'</span>)
      MODULE.log(commentOptsEle)
      <span class="hljs-keyword">return</span> status ? commentOptsEle.show() : commentOptsEle.hide()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-41">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-41">&#182;</a>
              </div>
              <p>Show/hide comment form</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _toggleCommentsInput (state) {
      <span class="hljs-keyword">let</span> commentInputEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'#_commentInput'</span>)
      <span class="hljs-keyword">return</span> state ? commentInputEle.show() : commentInputEle.hide()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-42">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-42">&#182;</a>
              </div>
              <p>helper to render a pop up</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _showPopup (title, template, foot) {
      <span class="hljs-keyword">const</span> popupEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'.popup'</span>)
      <span class="hljs-keyword">const</span> popupContainer = popupEle.find(<span class="hljs-string">'#_popupContainer'</span>)
      <span class="hljs-keyword">const</span> footer = popupEle.find(<span class="hljs-string">'.foot'</span>)

      popupContainer.find(<span class="hljs-string">'.head'</span>).html(title)
      popupContainer.find(<span class="hljs-string">'.content'</span>).html(template)
      foot.forEach(<span class="hljs-function"><span class="hljs-params">opt</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (!opt.name) {
          <span class="hljs-keyword">return</span>
        }
        $(footer.append($(<span class="hljs-string">`
          &lt;button name="close" class="btn btn-primary" &gt;<span class="hljs-subst">${opt.name}</span>&lt;/button&gt;`</span>).click(opt.call)))
      })
      popupEle.show()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-43">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-43">&#182;</a>
              </div>
              <p>hiding the popup</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _hidePopup () {
      <span class="hljs-keyword">const</span> popupEle = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'.popup'</span>)
      <span class="hljs-keyword">const</span> popupContainer = popupEle.find(<span class="hljs-string">'#_popupContainer'</span>)
      popupContainer.find(<span class="hljs-string">'.head'</span>).html(<span class="hljs-string">''</span>)
      popupContainer.find(<span class="hljs-string">'.content'</span>).html(<span class="hljs-string">''</span>)
      popupEle.find(<span class="hljs-string">'.foot'</span>).html(<span class="hljs-string">''</span>)
      popupEle.hide()
    }</pre></div></div>
            
        </li>
        
        
        <li id="section-44">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-44">&#182;</a>
              </div>
              <p>Spin until the given <code>promise</code> resolved or rejected</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _spinUntil (promise) {
      <span class="hljs-keyword">this</span>._toggleSpinner(<span class="hljs-literal">true</span>)
      <span class="hljs-keyword">return</span> promise.then(
        <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> <span class="hljs-keyword">this</span>._toggleSpinner(<span class="hljs-literal">false</span>),
        (err) =&gt; {
          <span class="hljs-built_in">console</span>.error(err)
          <span class="hljs-keyword">this</span>._toggleSpinner(<span class="hljs-literal">false</span>)
        }
      )
    }
  }</pre></div></div>
            
        </li>
        
        
        <li id="section-45">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-45">&#182;</a>
              </div>
              <p>Export the View to the MODULE namespace</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
  MODULE.View = View
})(<span class="hljs-built_in">window</span>.safeComments)</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
